<template>
  <a-card style="margin-top:-2px" :bordered="false">
    <div class="">
      <a-form>
        <!--查询条件 start-->
        <a-row :gutter="24" style="margin-top:10px;margin-left:60px" type="flex" >
          <a-col :span="10" :offset="1">
            <a-form-item
              label="所属项目"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-select placeholder="请选择" v-model="queryParam.projectId" style="width:210px">
                <a-select-option v-for="item in opts" :key="item.id" :value="item.id" >{{ item.projectName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item
              label="配置名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-input style="width:210px" v-model="queryParam.cname"/>
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item
              label="服务名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-input style="width:210px" v-model="queryParam.serverName"/>
            </a-form-item>
          </a-col>
        </a-row>
        <!--查询条件 end-->
        <!--操作按钮 start -->
        <a-row :gutter="24" algin="center" style="margin-top:10px" >
          <a-col :md="12">
            <span style="float:right" class="table-page-search-submitButtons">
              <a-button type="primary" @click="search">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
          <a-col :md="11" >
            <span class="table-page-search-submitButtons">
              <a-button type="primary" style="margin-left: 8px;float:right" @click="modelMethod('add',{})" v-action:add>新增</a-button>
            </span>
          </a-col>
        </a-row>
        <!--操作按钮 end -->
      </a-form>
    </div>
    <s-table
      ref="stable"
      size="default"
      :columns="columns"
      :data="loadData"
      style="margin-top:10px"
    >
      <span slot="action" slot-scope="text, record">
        <a-switch :checked="record.flag === '1' ? true : false" size="small" @change="changeFlag(record)" />
        <a-divider type="vertical" />
        <a @click="modelMethod('edit',record)" v-action:update>编辑</a>
        <a-divider type="vertical" />
        <a @click="modelMethod('del',record)">删除</a>
      </span>
    </s-table>
    <!-- 弹出框 -->
    <a-modal
      :title="operate=='detile'?'详情':operate=='edit'?'编辑':'新增'"
      style="top: 100px;"
      :width="600"
      v-model="modelVisible"
      @ok="handleOk"
      :destroyOnClose="true"
      :confirmLoading="confirmLoading"
    >
      <a-form :form="form">

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属项目" >
          <a-select placeholder="请选择" v-model="selectInfo.projectId" :disabled="operate=='detile'?'disabled':false">
            <a-select-option v-for="item in opts" :key="item.id" :value="item.id" >{{ item.projectName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="配置名称" >
          <a-input v-model="selectInfo.cname" :disabled="operate=='detile'?'disabled':false" :maxLength="60"/>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="JAVA路径" >
          <a-input v-model="selectInfo.javaPath" :disabled="operate=='detile'?'disabled':false" :maxLength="60"/>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="VUE路径" >
          <a-input v-model="selectInfo.vuePath" :disabled="operate=='detile'?'disabled':false" :maxLength="60"/>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="服务名称" >
          <a-input v-model="selectInfo.serverName" :disabled="operate=='detile'?'disabled':false" :maxLength="16"/>
        </a-form-item>

      </a-form>
    </a-modal>
  </a-card>
</template>
<script >
import { STable } from '@/components'
import { query, method } from '@/api/admin'
export default {
  components: {
    STable
  },
  data () {
    return {
      form: this.$form.createForm(this),
      // 查询参数
      queryParam: {}, // 查询条件
      actionParam: {}, // 请求参数
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return query('/generator/code/configmd/page', 'GET', parameter, {})
          .then(res => {
            return res.result
          })
      },
      // 表头
      columns: [
        { title: '配置名称', dataIndex: 'cname' },
        { title: '所属项目', dataIndex: 'projectName' },
        { title: 'JAVA路径', dataIndex: 'javaPath' },
        { title: 'VUE路径', dataIndex: 'vuePath' },
        { title: '服务名称', dataIndex: 'serverName' },
        { title: '创建人', dataIndex: 'crtUser' },
        { title: '创建时间', dataIndex: 'crtTime' },
        { title: '操作', width: '200px', dataIndex: 'action', scopedSlots: { customRender: 'action' }
        }
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      modelVisible: false, // 弹出框显示
      operate: 'QUERY', // 当前操作
      selectInfo: {}, // 选中的数据
      confirmLoading: false, // Loading
      opts: [] // 项目下拉框
    }
  },
  created () {
    this.getProjectList()
  },
  methods: {
    /**
     * 搜索
     */
    search () {
      this.$refs.stable.loadData({}, this.queryParam, {})
    },
    // 操作按钮
    modelMethod (action, selectInfo) {
      this.operate = action // 记录当前操作
      this.selectInfo = Object.assign({}, selectInfo) // 记录当前操作的数据
      const _this = this
      if (this.operate === 'del') { // 删除
        this.$confirm({
          title: '警告',
          content: `确认要删除该条记录吗?`,
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk () {
            _this.actionParam = {// 请求参数
              'url': '/generator/code/configmd/' + _this.selectInfo.id,
              'action': 'delete',
              'parameter': {},
              'data': {},
              'message': '删除成功'
            }
            // 调用请求
            method(_this.actionParam).then(res => {
              _this.$refs.stable.refresh(true)// 刷新列表
            })
          },
          onCancel: () => {
            this.$notification['info']({
              message: '取消删除操作',
              duration: 4
            })
          }
        })
      } else {
        this.modelVisible = true // 弹出框显示
      }
    },
    // 修改状态
    changeFlag (record) {
      this.operate = 'edit'
      record.flag = record.flag === '1' ? '0' : '1'
      this.selectInfo = Object.assign({}, record) // 记录当前操作的数据
      this.handleOk()
    },
    // 确认
    handleOk () {
      if (this.operate === 'add') { // 新增
        this.actionParam = {
          'url': '/generator/code/configmd',
          'action': 'POST',
          'parameter': {},
          'data': this.selectInfo,
          'message': '新增成功'
        }
      } else if (this.operate === 'edit') { // 修改
        this.actionParam = {
          'url': '/generator/code/configmd',
          'action': 'PUT',
          'parameter': {},
          'data': this.selectInfo,
          'message': '修改成功'
        }
      }
      // 调用请求
      return method(this.actionParam).then(res => {
        // 关闭编辑框
        this.modelVisible = false
        // 刷新列表
        this.$refs.stable.refresh(true)
      })
    },
    /**
     * 项目列表下拉框
     */
    getProjectList () {
      query('/generator/code/project/all', 'GET', '')
        .then(res => {
          this.opts = res.result.data
        })
    }
  }
}
</script>
<style scoped>

</style>
